<template>
	<view>
		<view style="width: 100%; height:70rpx; position: relative">
			<view class="sousuobox"
				style="border-radius: 20rpx;display: flex;align-items: center;margin: auto; height: 100rpx;width: 600rpx;justify-content: center;position: absolute;top: 100%;left: 50%; transform: translate(-50%,-50%);  width: 90%;">
				<view style="width: 100%;position: relative;">
					<view
						style="width: 100%;display: flex;justify-content: center;position: absolute;top: 50%;left: 56%;transform: translate(-50%,-50%);display: flex;flex-direction: column">
						<view style="width: 100%;"> <u-search placeholder="请输入手机号或姓名查询" borderColor="#68C5FF"
								actionText="" v-model="searchValue" @custom="sousuo" @search="sousuo"
								@change="sousuo"></u-search></view>
					</view>
				</view>
			</view>
		</view>
		<view
			style="border-radius:20rpx;background-color: #68C5FF;display: flex;flex-direction: row;font-size: 22rpx;font-weight: bold; width: 100%;height: 60rpx;margin-top:70rpx;margin-bottom: -2vh;">
			<view style="display: flex;flex: 5;justify-content: center;align-items: center; color: white;">姓名</view>
			<view
				style="display: flex;flex-direction: row;flex: 4;justify-content: center;align-items: center;color: white;">
				<view>电话</view>
			</view>
			<view
				style="display: flex;flex-direction: row;flex: 5;justify-content: center;align-items: center;color: white;"	>
				<view></view>
			</view>
		</view>
		<view>

			<!-- 下面是数据的循环 -->
			<view
				style="display: flex;flex-direction: column;font-size: 28rpx; background-color: white;width: 100%;margin: 50rpx auto 0 auto;box-shadow: 1px 1px 5px #c2c2c2; "
				v-if="data.length > 0">
				<view style="display: flex; flex-direction: column;" scroll-y="true" class="scroll-Y">
					<view
						style="background-color: white;display: flex;flex-direction: row;  width: 100%;padding: 20rpx;"
						v-for="(i, k) in data" :key="k">
						<view style="display: flex;flex: 4;justify-content: center;height: 50rpx;">
							{{ i.name || i.mobile }}
						</view>
						<view @click="makephone(i.mobile)" style="display: flex;flex: 4;justify-content: center;height: 50rpx;">
							{{ i.mobile }}
						</view>
						<view @click="zhekoufun(i)"
							style="display: flex;flex: 4;justify-content: center;height: 50rpx;">
							{{shezhizhekou}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 如果没有数据,显示没有数据的图片 -->
		<view style="margin: 50rpx auto 0 auto;" v-if="data.length == 0">
			没有数据啦……
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quankezx_name_tel: {},
				shezhizhekou: '',
				searchValue: '',
				data: []
			};
		},
		// 加载数据明细
		onLoad() {
			this.quankezx_name_tel = uni.getStorageSync('quankezx_name_tel')
			this.get_mydaili()
		},
		methods: {
			zhekoufun(e) {
				uni.navigateTo({
					url: `/pages/lipinka_zhekou/lipinka_zhekou?id=${e._id}&name=${e.name || e.mobile}`
				})
			},
			get_mydaili() {
				let lin_tuijianlian = [...(this.quankezx_name_tel.tuijian_lian || [])];
				lin_tuijianlian.push(this.quankezx_name_tel.my_invite_code)
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 12, 
						tiaojian: {
							tuijian_lian: lin_tuijianlian
						}
					}
				}).then(res => {
					this.data = res.result.data
					this.shezhizhekou = "设置折扣>>"
				})
			},
			// 点击拨打电话
			makephone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				});
			},
		}
	};
</script>
<style>
	page {
		background-color: #F7FCFF;
		background-image: url('../../static/shouyebeijing.png');
		background-size: 750rpx 600rpx;
		background-repeat: no-repeat;
		background-color: #f8f8f8;
	}
	.sousuobox {
		background: white;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
	}
</style>